<template>

  <div class="guli-player">


    <div class="head">
      <a href="#" title="虎课学院">
        <img class="logo" src="~/assets/img/logo.png" lt="虎课学院">
      </a></div>
    <ul class="h-r-login">
      <li v-if="loginInfo.id" id="is-login-two" class="h-r-user">
        <a href="/ucenter" title>
          <img
            :src="loginInfo.avatar"
            width="30"
            height="30"
            class="vam picImg"
            alt
          >
          <span id="userName" class="vam disIb">{{ loginInfo.nickname }}</span>
        </a>
      </li>
      <!-- /未登录显示第1 li；登录后显示第2，3 li -->
    </ul>
    <div class="body">
      <div class="content"><nuxt/></div>
    </div>
  </div>
</template>
<script>
  import cookie from "js-cookie";

  export default {
    data(){
      return {
        loginInfo: {
          id: '',
          age: '',
          avatar: '',
          mobile: '',
          nickname: '',
          sex: ''
        }
      }
    },
    created() {
      this.showInfo()
    },
    methods:{
      showInfo() {
        //debugger
        var jsonStr = cookie.get("ljh_ucenter");
        //alert(jsonStr)
        if (jsonStr) {
          this.loginInfo = JSON.parse(jsonStr)
        }
      },
    },
  }
</script>

<style>
  html,body{
    height:100%;
  }
</style>

<style scoped>
  .head {
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }

  .head .logo{
    height: 50px;
    margin-left: 10px;
  }

  .body {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
  }
</style>
